package ;

import easelhx.display.Shape;
import easelhx.display.Stage;
import easelhx.display.Text;
import easelhx.utils.Ticker;
import js.HTMLCanvasElement;
import js.Lib;

/**
 * ...
 * @author 
 */

class CacheAsBitmapExample implements IExample
{
	private var canvas:HTMLCanvasElement;
	private var stage:Stage;
	private var shape:Shape;
	private var circleRadius:Float;
	private var fpsLabel:Text;

	public function new() 
	{
		canvas = cast Lib.document.getElementById("testCanvas");
		stage =  new Stage(canvas);
	}
	
	/* INTERFACE IExample */
	
	public function run():Void 
	{
		circleRadius = 20.0;
		
		// create a large number of slightly complex vector shapes, and give them random positions and velocities:

		var colors = ["#828b20", "#b0ac31", "#cbc53d", "#fad779", "#f9e4ad", "#faf2db", "#563512", "#9b4a0b", "#d36600", "#fe8a00", "#f9a71f"];
		
		for (i in 0...1000) {
			shape = new Shape();
			shape.graphics.beginFill(colors[Std.int(Math.random()*colors.length)|0]).drawCircle(0,0,circleRadius);
			shape.graphics.beginFill(colors[Std.int(Math.random()*colors.length) |0]).drawCircle(0,0,circleRadius*0.8);
			shape.graphics.beginFill(colors[Std.int(Math.random()*colors.length) |0]).drawCircle(0,0,circleRadius*0.6);
			shape.graphics.beginFill(colors[Std.int(Math.random()*colors.length) |0]).drawCircle(0,0,circleRadius*0.4);
			shape.graphics.beginFill(colors[Std.int(Math.random()*colors.length) |0]).drawCircle(0,0,circleRadius*0.2);
			shape.x = Math.random()*canvas.width;
			shape.y = Math.random() * canvas.height;
			Reflect.setField(shape, "velX", Math.random()*10-5);
			Reflect.setField(shape, "velY", Math.random()*10-5);
			
			// turn snapToPixel on for all shapes - it's set to false by default on Shape.
			// it won't do anything until stage.snapToPixelEnabled is set to true.
			shape.snapToPixel = true;
			
			stage.addChild(shape);
		}
		
		// add a text object to output the current FPS:
		fpsLabel = new Text("-- fps","bold 18px Arial","#FFF");
		stage.addChild(fpsLabel);
		fpsLabel.x = 10;
		fpsLabel.y = 20;
		
		// start the tick and point it at the window so we can do some work before updating the stage:
		Ticker.addListener(this);
		Ticker.setFPS(50);
		
		toggleCache(true);
	}
	
	private function tick() : Void 
	{
		var w:Float = canvas.width;
		var h:Float = canvas.height;
		var len:Int = stage.getNumChildren()-1;
		
		// iterate through all the children and move them according to their velocity:
		for (i in 1 ... len) {
			var shape:Shape = cast stage.getChildAt(i);
			shape.x = (shape.x + Reflect.field(shape,"velX") + w) % w;
			shape.y = (shape.y + Reflect.field(shape,"velY") + h) % h;
		}
		
		fpsLabel.text = Math.round(Ticker.getMeasuredFPS())+" fps";
		
		// draw the updates to stage:
		stage.update();
	}

	private function toggleCache(value) : Void 
	{
		stage.snapToPixelEnabled = true;
		// iterate all the children except the fpsLabel, and set up the cache:
		var len = stage.getNumChildren()-1;
		for (i in 0...len) {
			var shape:Shape = cast stage.getChildAt(i);
			if (value) {
				shape.cache(-circleRadius, -circleRadius, circleRadius*2, circleRadius*2);
			} else {
				shape.uncache();
			}
		}
	}
	
}